<!--
 * @Author: alenjzhang
 * @Date: 2024-04-06 18:19:57
 * @Description: 服务时间
-->


<script setup lang="ts">
import TagChecked from '@/components/tag-checked/index.vue';
import WeekTagChecked from '@/components/week-tag-checked/index.vue';
import {CARE_SERVICE_MONTH_OPTIONS,
	CARE_SERVICE_TIME_OPTIONS, CARE_SERVICE_WEEK_OPTIONS,
	EVERY_MONTH_OPTIONS, EVERY_WEEK_OPTIONS, FREQUENCY,dateFormat
} from '@/const';
import { useCustomForm } from '@/hooks';
import { transformServiceTimeToInit } from '@/tools/care'
import type { ServiceTimeForm } from '@/types';
import { computed, onMounted, reactive, watch } from 'vue';

const field = useCustomForm();
type eventTypes = 'update:value' | 'update:frequency' | 'update:month' | 'update:week'
 | 'update:everyMonth' | 'update:everyWeek' | 'update:time' | 'update:first'
const props = defineProps<ServiceTimeForm>();
const emit = defineEmits([
	'update:value',
	'update:frequency',
	'update:month',
	'update:week',
	'update:everyMonth',
	'update:everyWeek',
	'update:time',
	'update:first',
]);

const form = reactive<ServiceTimeForm>({
	frequency: [FREQUENCY.day],
	month: [],
	week: [],
	everyMonth: 'none',
	everyWeek: 'none',
	time: [],
	first: ''
});

// watchEffect(() => {
// 	if (props) {
// 		Object.assign(form, transformServiceTimeToInit(props));
// 	}
// });

onMounted(() => {
	if (props) {
		Object.assign(form, transformServiceTimeToInit(props));
	}
	formChange();
});

const isWeek = computed(() => {
	return form.frequency[0] === 'week';
});

const isMonth = computed(() => {
	return form.frequency[0] === 'month';
});

const isOther = computed(() => {
	return form.frequency[0] === 'other';
});

const itemClass = 'flex items-center mr20 w-140';
const selectClass = 'mr10 ml10';

watch(() => form.everyWeek, (week) => {
	if (week && week !== 'none') {
		form.everyMonth = 'none';
	}
});
watch(() => form.everyMonth, (month) => {
	if (month && month !== 'none') {
		form.everyWeek = 'none';
	}
});

const formChange = (_?: eventTypes) => {
	// emit(event, form.frequency);
	emit('update:value', form);
	field.onFieldChange();
}

</script>

<template>
	<div class="service-time">
		<WeekTagChecked @update:value="formChange('update:frequency')" v-model:value="form.frequency" :options="CARE_SERVICE_TIME_OPTIONS" class-name="mb10" />
		<TagChecked v-if="isWeek" v-model:value="form.week" type="week" class-name="week-tag"
			:options="CARE_SERVICE_WEEK_OPTIONS" @update:value="formChange('update:everyWeek')" />
		<TagChecked v-if="isMonth" v-model:value="form.month" type="week" class-name="month-tag w-270"
			:options="CARE_SERVICE_MONTH_OPTIONS" @update:value="formChange('update:everyMonth')" />
		<div v-if="isOther" class="flex">
			<div :class="itemClass">
				每
				<a-select @change="formChange('update:everyMonth')" v-model:value="form.everyMonth" :class="selectClass"
					:options="EVERY_MONTH_OPTIONS"></a-select>
				月
			</div>
			<div :class="itemClass">
				每
				<a-select @change="formChange('update:everyWeek')" v-model:value="form.everyWeek" :class="selectClass" :options="EVERY_WEEK_OPTIONS"></a-select>
				周
			</div>
			<div :class="itemClass + ' w-260'">
				首次执行时间
				<div class="w120 ml10">
					<a-select v-if="isOther && form.everyWeek && form.everyWeek !== 'none'"
						:options="CARE_SERVICE_WEEK_OPTIONS" @change="formChange('update:first')" v-model:value="form.first"></a-select>
					<a-date-picker :valueFormat="dateFormat" v-else @change="formChange('update:first')" v-model:value="form.first"></a-date-picker>
				</div>
			</div>
		</div>
		<div class="mt20">
			<a-time-range-picker v-model:value="form.time" valueFormat="HH:mm:ss" @change="formChange('update:time')" />
		</div>
	</div>
</template>

<style lang="less" scoped>
.service-time {

	.week-tag,
	.month-tag {
		:deep(.ant-tag) {
			border: unset;
		}
	}

	.month-tag {
		:deep(.ant-tag) {
			width: 30px;
			text-align: center;
			margin-bottom: 8px;
		}
	}
}
</style>
